// 手写一个 VueRouter 插件简易实现
let Vue
class VueRouter {
    constructor(options) {
        // 我们实例化的时候 用户传进来的路由规则参数
        // console.log('options ===> ', options);
        // 当前路由 默认是 / 根路径, 这个值会随着我们的路由改变而改变
        // 路由改变了 但是routerView里面的值并没有进行响应式修改 所以我们要把 this.current 变成响应式
        // console.log('Vue sl ===> ', Vue.util);
        let initPath = '/'
        // 语法：将 this.current 设置为响应式，如果没有就创建 默认值为initPath
        Vue.util.defineReactive(this, 'current', initPath)
        // 用户传进来的router表规则 绑定到this上 方便全局控制
        this.routes = options.routes
        // 用户传进来的路由规则 默认hash
        this.mode = options.mode || 'hash'
        // 监听路由改变
        this.init()
    }

    init() {
        if (this.mode === 'hash') {
            // 如果是hash 就录用Bom自带的hash处理规则
            // console.log('location.hash ===> ', location.hash);
            // 监听项目第一次加载
            window.addEventListener('load', () => {
                // 因为 location.hash 获取的值是 #/about,但是我们的配置路由表中 是不存在#的 所以要去除
                // console.log('location.hash ==> ', location.hash, location.hash.slice(1));
                this.current = location.hash.slice(1)
            })
            // 当路由改变时
            window.addEventListener('hashchange', () => {
                // console.log('location.hash ==> ', location.hash, location.hash.slice(1));
                this.current = location.hash.slice(1)
            })
        } else {
            // 如果是 history 模式
        }
    }
}
// 因为是插件 所以需要有 install
VueRouter.install = _vue => {
    // 吧实例赋值给Vue 在本文件作用域下 可以统一使用Vue
    Vue = _vue
    // 给每一个组件添加上router 实例
    Vue.mixin({
        beforeCreate() {
            // console.log('this ==<> ', this, this.$options);
            // 在原型上添加router属性 全局控制router的操作  router.push('...')
            // 为什么要判断this.$options.router, 通过上面的打印会发现因为只有跟页面才会有$router 所以要绑定到全局
            if (this.$options.router) {
                // console.log('have value ==> ', this.$options.router);
                Vue.prototype.$router = this.$options.router
                // console.log('Vue.prototype.$router ==>  ', this.$router);
            }
        },
    })

    // 因为要使用 routerView 和 routerLink 所以要创建全局组件
    Vue.component("router-link", {
        name: 'RrouterLinks',
        // 拿到全局的值
        props: {
            // 要跳转的地址
            to: {
                type: String,
                require: true
            }
        },
        render(h) {
            return h('a', {
                attrs: {
                    href: '#' + this.to
                }
                // router-link 的内容是一个插槽,显示我们自己在组件内部编写的值
                // 这样就能获取到我们 <router-link to="/home">回家</router-link> 中的 " 回家 "
            }, this.$slots.default)
        },
    })

    // router-view 要做几件事
    // 1. 根据路由的匹配规则 匹配路由 
    Vue.component("router-view", {
        name: 'RrouterView',
        render(h) {
            // 在router中获取this.$router
            // console.log('routerView ======> ', this.$router);
            let current = this.$router.current
            let routes = this.$router.routes
            // console.log('this.$router =====>  响应式 123123', this.$router);
            // 匹配规则
            let com = routes.find(item => {
                // console.log('item.path === current ==》 ', item.path, current);
                return item.path === current
            })
            // console.log('current---routes ======> ', current, routes, com);
            return h(com.component)
        },
    })

}

export default VueRouter